extends layout

block content
	- var docs= JSON.parse(definition);
	- 
	- function displayText(txt) {
	- return txt.replace('\n','<br/>');	
	- }

	- function prettyDate(date){
	- var d = date.getDate();
	- var m = date.getMonth() + 1; //Months are zero based
	- var y = date.getFullYear();
	- var h = date.getHours();
	- var mm = date.getMinutes();
	- var s = date.getSeconds();
	-
	-     return d+'/'+m+'/'+y+' '+h+':'+mm+':'+s;
	-   }

	div(style="border-bottom: 1px solid #999;padding-bottom: 10px;overflow: hidden;")

		h1(style="float:left;")
			span #{title}

		span(id='Details-block',font-size='10px')
		
	script(type="text/javascript").
		var jsonData=!{definition};	
		var decorations= !{decorations};	
	script(type="text/javascript").
		function showDocs()
		{
		  var dv = document.getElementById("docs");
		  var button =document.getElementById("showDoc");
		  if (dv.style.display === "none") {
			dv.style.display = "block";
			button.innerHTML="&uarr;";
		  } else {
			dv.style.display = "none";
			button.innerHTML="&darr;";
		  }
		}
		function showLogs()
		{
		  var dv = document.getElementById("logs");
		  var button =document.getElementById("showHide");
		  if (dv.style.display === "none") {
			dv.style.display = "block";
			button.innerHTML="&uarr;";
		  } else {
			dv.style.display = "none";
			button.innerHTML="&darr;";
		  }
		}
		$(document).ready(function() {
		  var lines= $('#logs').find('table').find('tr').find('td');
		  lines.each(function(index) {

			  if ($(this).text().startsWith('debug:')) {
				$(this).css("color", "green");
				}
			  if ($(this).text().startsWith('log:Action:')) {
				$(this).css("font-weight", "bold");
				$(this).css("font-size", "14px");
				}
			}); // end each
		  }); // end ready
				
	h4 Instance Information
	- let lastAt = (lastItem.endedAt) ? lastItem.endedAt : lastItem.startedAt;
	table
		tr 
			td name:
			td  #{instance.name}
			td id:
			td #{instance.id}
		tr
			td started At
			td(class='startDate') #{(instance.startedAt)}
			td ended At
			td #{(instance.endedAt)}
		tr
			td lastAt
			td #{lastAt} 
		tr
			td lastItem
			td #{lastItem.elementId}
			td last status
			td #{lastItem.status}

				
	h4 Instance Data 
	table
		each v in vars
			tr
				td #{v.key}
				td #{v.value}

	div!= svg

	h4 Model Documentation<button id="showDoc" onclick="showDocs()">&darr;</button>

	div(id="docs" style="display:default;") 
		table
			tr
				th(colspan=5) Processes
			tr
				th() Id
				th() name
			each proc in docs.processes
				tr
					td #{proc.id}
					td #{proc.name}
					if (proc.description)
						each line in proc.description
							tr
								td
								td
								td #{line[0]}
								td #{line[1]}
					if (proc.docs)
						each doc in proc.docs
							tr
								td
								td
								td Documentation:
								td #{doc.text}

		table
			tr
				th(colspan=5) Nodes
			tr
				th id
				th name
				th type/feature
				th details
			each el in docs.elements
				tr
					td #{el.id}
					td #{el.name}
					td #{el.type}#{el.subType}
					td
						each line in el.description
							tr
								td 
								td
								td  !{line[0]}
								td  !{line[1].replace('\n','<br />')}
						each behav in el.behaviours
							each line in behav
								tr
									td
									td
									td #{line[0]}
									td !{line[1].replace("\n",'<br />')}
						if (el.docs)
							each doc in el.docs
								tr
									td
									td
									td Documentation:
									td #{doc.text}
		table
			tr
				th(colspan=5) Sequence Flows (only with some details)
			tr
				th id
				th from 
				th to
				th feature
				th details
			each el in docs.flows

				if (el.description.length >0)
					tr
						td #{el.id}
						td #{el.from}
						td #{el.to}
						each line in el.description
							tr
								td
								td
								td
								td !{line[0]}
								td !{line[1]}
						if (el.docs)
							each doc in el.docs
								tr
									td
									td
									td Documentation:
									td #{doc.text}




	h4 Instance Items

	span Times shown are from the start of the Execution
	table
		tr
			td seq
			td Element Id
			td Name
			td Started
			td Ended
			td Status
			td Type
			td User
			td Action
				
		- let seq=0;
		each item in items
			- var ref = "?id="+item.id+"&processName="+instance.name+"&elementId="+item.elementId;
			- var label='';
			- var label2='';
			- if (item.status=='wait' && item.type=='bpmn:UserTask') label= 'Execute';
			- if (item.status=='wait' && item.type=='bpmn:UserTask') label2= 'Assign';
			- if (item.status=='wait' && item.type.includes('Event')) label= 'Force';
			- var assign='';
			- if (item.candidateUsers) assign+='>Assigned to users:\''+item.candidateUsers+'\'';
			- if (item.candidateGroups) assign+=' groups: \''+item.candidateGroups+'\'';
			- if (item.assignee) assign+=' Assigned to: \''+item.assignee+'\'';
			- if (item.dueDate) assign+=' Due on:'+item.dueDate;
			- seq++;
				tr
					td #{seq}
					td #{item.elementId}
					td #{item.name}
					td(class='date') #{item.startedAt}
					td(class='date') #{item.endedAt}
					td #{item.status}
					td #{item.type}
					td #{item.userName}
					td
						a(href=`/invokeItem${ref}`) #{label} 
						a(href=`/assign${ref}`) #{label2}
			if (!assign=='')
				tr
					td
					td(colspan=8) #{assign}

	h4 Instance Info 
	div(id="info" ) 
		table(style='width:100%')
			each log in logs
				if (log.type=='info')
					tr
						td(style="width:1%;white-space:nowrap") #{prettyDate(log.date)}
						td #{log.message}
		
	h4 Instance Logs <button id="showHide" onclick="showLogs()">&darr;</button>
	div(id="logs" style="display:none;") 
		table(style='width:100%')
			each log in logs
				tr
					td(style="white-space:nowrap") #{prettyDate(log.date)}
					td #{log.message}
		
